<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .ab {
            position: absolute;
        }
        .fi {
            position: fixed;
        }
        .re {
            position: relative;
        }
        .demo {
            position: fixed;
        }
    </style>
</head>
<body>
    <div class="ab test">
        <div class="demo"></div>
    </div>
    <div class="fi test">
        <div class="demo"></div>
    </div>
    <div class="re test">
        <div class="demo"></div>
    </div>
    <div class="test">
        <div class="demo"></div>
    </div>

    <script>

        var dem = document.getElementsByClassName('demo');
        var tes = document.getElementsByClassName('test');
        // dem 为非定位，相对定位元素，绝对定位
        console.log(dem[0].offsetParent); // 父级div
        console.log(dem[1].offsetParent);// 父级div
        console.log(dem[2].offsetParent);// 父级div
        console.log(dem[3].offsetParent);// body

        console.log(tes[0].offsetParent); // body
        console.log(tes[1].offsetParent);// null
        console.log(tes[2].offsetParent);// body
        console.log(tes[3].offsetParent);// body

        // dem 为固定定位元素
        console.log(dem[0].offsetParent); // null
        console.log(dem[1].offsetParent);// null
        console.log(dem[2].offsetParent);// null
        console.log(dem[3].offsetParent);// null

        console.log(tes[0].offsetParent); // body
        console.log(tes[1].offsetParent);// null
        console.log(tes[2].offsetParent);// body
        console.log(tes[3].offsetParent);// body

    </script>
</body>
</html>